<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
<script>
    /*
    事件机制
    所谓的时间机制就是浏览器无时不刻的监视我们的行为 但是浏览器不会做任何事情 当我我们触发某个行为的时候 浏览器会检查我们已经注册对应的时间处理函数 如果已经注册了时间处理函数 那么浏览器就会调用对应的函数以响应我们的行为 但是如果没有发现注册 那么浏览器什么夜不会处理
    这样的机制就是事件处理机制
    * 所谓的注册
    * 简单的说就是告知浏览器有一个函数或多个函数 一旦触发时间浏览器就会一次调用函数
    * 时间处理函数
    * 触发事件
    * 用户时间 事件名
    *
    * 如果使用代码注册事件
    * 可以使用什么事件
    * 使用最多的事鼠标事件与键盘事件
    * mousemove,mouseout,mouseover
    * click,mousedown,mouseup
    * keydown,keyup,keypress
    *
    * 如何注册事件
    * 使用属性赋值 DOM 0级事件
    * btn.onclick = function(){...}; 比较不安全
    * 标准做法  DOM 2级事件
    * btn.addEventListener("click",function(){...}) 比较安全 标准浏览器中可使用(this指向前面的对象)
    * btn.addEventListener("onclick",function(){...})非标准浏览器的方法 (函数体里的this指向window)
    * DOM 3级时间
    * createEvent({...});
    *
    * 在jq中事件的使用方法
    * 在jq中添加点击时间 可以使用
    * $('...').on("click",function(){})
    * $("...").click(function(){})
    *
    *
    * on方法和off方法
    * 首先考虑实现通用的on方法
    * 语法 $obj.on(事件名，时间处理函数)
    * 功能：给每一个dom元素绑定时间处理函数
    * 实现 遍历 然后给每一个元素都增加事件
    *
    *
    * 样式操作
    * css,addCladd,removeClass,hasClass,toggleClass
    * css
    *   css('color','blue')设置对应样式
    *   css('color')获取对应样式
    *   css({color:'red'}) 对象设置样式
    *
    * addClass
    *
    * 属性操作
    * attr prop html text val
    *
    * */
</script>
</html>